import {message, Modal} from 'antd'
import { Form} from 'antd';
import {useEffect, useState} from "react";
import {getRemarks, putRemarks} from "@/services/ant-design-pro/order";
import ProForm, { ProFormTextArea } from '@ant-design/pro-form';
import ProSkeleton from '@ant-design/pro-skeleton';

const OrderRemarksModal = (props) => {
    const {visible , setVisible, id,mack} = props
    const [formData,setFormData] = useState(null)
    const [form] = Form.useForm()

    useEffect(async () => {
        const data = await getRemarks(id)
        setFormData(data)
    },[])

    return (
        <Modal
            title="请填写备注"
            visible={visible}
            onCancel={()=>{setVisible(false)}}
            destroyOnClose={true}
            onOk={()=>{
                form.validateFields().then( async valuse=>{
                    mack()
                    await putRemarks(id,{...valuse})
                    setTimeout(()=>{
                      setVisible(false)
                    },800)
                     message.success('修改备注成功')
                })
            }}
        >
            {formData ?
                <ProForm
                    submitter={false}
                    form={form}
                    initialValues={formData}
                >
                <ProFormTextArea
                    key={'remark'}
                    name="remark"
                    label="备注"
                    placeholder="订单备注"
                    fieldProps={{
                        maxLength: 200,
                        showCount: true,
                        allowClear: true,
                    }}
                />
                </ProForm>
            : <ProSkeleton type="result" />
            }
        </Modal>
    );
};

export default OrderRemarksModal;
